<x-inner class="au-inner">
  <x-row space="1" [ngStyle]="{ 'margin-top': '-0.325rem', 'margin-bottom': '-0.325rem' }">
    <x-col span="6" xs="24" sm="12" md="6">
      <x-card>
        <x-statistic label="在线人数" value="{{ 2981231 | number }}"> </x-statistic>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="12" md="6">
      <x-card>
        <x-statistic label="销售总额（CNY）" value="{{ 1023123 | number }}"> </x-statistic>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="12" md="6">
      <x-card>
        <x-statistic label="上升比例" value="{{ 15.28 | number: '1.0-2' }}" suffix="%" [valueStyle]="{ color: '#67c23a' }"> </x-statistic>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="12" md="6">
      <x-card>
        <x-statistic label="下降比例" value="{{ 2.28 | number: '1.0-2' }}" suffix="%" [valueStyle]="{ color: '#f56c6c' }"> </x-statistic>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="24" md="8">
      <x-card class="graph">
        <div #bar></div>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="24" md="8">
      <x-card class="graph">
        <div #radar></div>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="24" md="8">
      <x-card class="graph">
        <div #word></div>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="24" md="12">
      <x-card class="graph">
        <div #line></div>
      </x-card>
    </x-col>
    <x-col span="6" xs="24" sm="24" md="12">
      <x-card class="graph">
        <div #area></div>
      </x-card>
    </x-col>
  </x-row>
</x-inner>
